
<template name='print_jcp'>
	<uni-popup ref="orderPrint" type="center" title="单据联合表">
	
		<view class="Zindex6 w100 show-order-lishi " style="max-height: 100%;">
			<view class="onloadBox"  v-if="pageShow==true">
				<h3 id="onloadMsg" class="onload">
					正在起动...
				</h3>
				<view v-html="onloadMsg"></view>
			</view>
			<!-- 核心区 -->
			<view class="box menu-scroll">
				<!-- 单据表格 -->
				<view id="info">
					<table >
						<!-- 表头 -->
						<thead>
							<!-- 表头 -->
							<tr class="Lfte_tr01">
								<td colspan="8">
									<h3 class="title ">销售联合单</h3>
								</td>
							</tr>
							
							<tr class="Lfte_tr01">
								<td colspan="6">
									所属线路：{{routeName}}
								</td>
								<td colspan="2">
									打印日期：{{dateOnly}}
								</td>
							</tr>
							<tr class="Lfte_tr01">
								<td colspan="6">
									销售人员：
								</td>
								<td colspan="2">
									收款人员：
								</td>
							</tr>
							<tr class="Lfte_tr01">
								<td colspan="3">
									现金：
								</td>
								<td colspan="3">
									转账：
								</td>
								<td colspan="2">
									合计：
								</td>
							</tr>
							<!-- end -->
						</thead>
						<tbody>
							<!-- 表内容标题 -->
							<tr class="solid">
								<th style="width: 5%">
									序
								</th>
								<th style="width: 10%">
									线路
								</th>
								<th style="width: 20%">
									客户
								</th>
								<th style="width: 10%">
									历史
								</th>
								<th style="width: 10%">
									本单
								</th>
								<th style="width: 10%">
									合计
								</th>
								<th style="width: 10%">
									已收款
								</th>
								<th style="width: 25%">
									备注
								</th>
							</tr>
							<!-- end -->
							<!-- 正式内容 -->
							<tr class="solid" v-for="(item,index) in resData.list" :key="index" >
								<th style="width: 5%">
									{{index+1}}
								</th>
								<th style="width: 10%">
									{{$routeData.GetRouteName(item.route_id)}}
								</th>
								<th style="width: 20%">
									{{item.name}}
								</th>
								<th style="width: 10%">
									{{item.user.debt}}
								</th>
								<th style="width: 10%">
									{{item.sum}}
								</th>
								<th style="width: 10%" >
									{{item.sum >0 || item.user.debt >0 ?(item.sum+item.user.debt):''}}
								</th>
								<th style="width: 10%">
									
								</th>
								<th style="width: 25%">
									
								</th>
							</tr>
							<!-- end -->
							
						</tbody>
						 <!-- 小计 -->
						 <tfoot >
							
							 <tr >
								<td colspan="4" class="b-none">
									第
									<font tdata="PageNO" format="000" color="blue">
										##
									</font>
									页/共
									<font tdata="PageCount" format="000" color="blue">
										##
									</font>
									页
								</td>
								<td colspan="2" class="b-none" tdata="SubSum" format="0.00" tindex="5">
									本页小计：
									<font color="blue">
										#####
									</font>
								</td>
								<td colspan="2" class="b-none" tdata="AllSum" format="0.00" tindex="5">
									合计：
									<font color="blue">
										#####
									</font>
								</td>
							 </tr>
						 </tfoot>
					
					</table>
				</view>
				<!-- end -->
				<view id="tfoot"></view>
				<view>
					<!-- 打印纸 -->
					<view class="main" v-if="Papers.list.length>0">
						<view class="tips-center tips-right">
							打印机:
						</view>
						<picker 
						@change="PrintersChange"
						:value="Printer.index" 
						range-key="text"
						class="solid w80b"
						:range="Printer.list">
							<view class="uni-input">{{Printer.list[Printer.index].text }}</view>
						</picker>
						
						<view class="tips-center tips-right">
							打印纸:
						</view>
						<picker 
						@change="gradeChange"
						:value="Papers.index" 
						range-key="text"
						class="solid w80b"
						:range="Papers.list">
							<view class="uni-input">{{Papers.list[Papers.index].text }}</view>
						</picker>
						
						
						<!-- 自定义宽高 -->
						<view class="pagesCreate"  v-if="Papers.pagesCreateShow">
							<view class="tips-center tips-right center">
								纸张宽:
							</view>
							<input type="number" size="5"
							class="solid w80b center" placeholder-class="placeholder-class"
							v-model="Papers.width"
							placeholder="单位/mm"
							@input="inputElement('lh_width')" 
							@confirm="inputElement('lh_width')">
						
							<view class="tips-center tips-right center">
								纸张高:
							</view>
							<input type="number" size="4"
							class="solid w80b center" placeholder-class="placeholder-class"
							v-model="Papers.height"
							placeholder="单位/mm"
							@input="inputElement('lh_height')" 
							style="text-align:left"
							@confirm="inputElement('lh_height')">

						</view>
						
						<view class="tips-center tips-right butss color2 center" @click="Prnt_Oneform">
							执行打印
						</view>
					</view>
					<!-- end -->
					
					<view class="content contentSav font12">
						提示:必须下载专业的
						<a href="/static/print/CLodop_Setup_for_Win64NT_6.623EN.exe">
							打印控件
						</a>
						安装完成后刷新网页方可正常打印
					</view>
					<!-- end -->
				</view>
			</view>
			<!-- end -->
		</view>
		
	</uni-popup>
</template>

<script>
	var LODOP
	import {
		getLodop
	} from "utils/LodopFuncs.js"

	export default{
		name:'print_jcp',
		data(){
			return{
				onloadMsg:'',
				resData:{},//打印数据
				Papers:{
					list:[],//当前打印机的打印纸数组
					index:-1,//选中的打印纸索引
					height: 1400,//自定义的打印纸高度 单位mm
					width: 2410,//自定义的打印纸宽度 单位mm
					pagesCreateShow:false,//自定义纸张是否可见
					name:''
				},
				pageShow:false,
				Printer:{
					list:[],
					index:-1,
				},
				routeName:"",
				dateOnly:''
			}
		},
		created() {
			var that = this
			//起动打印服务
			this.checkLodop(function(){
				that.getStorage();//获取缓存记忆
			})
			this.getStorageInput()
		},
		methods:{
			open(body){
				var that = this
				
				if(body.route_id){
					that.routeName =  that.$routeData.GetRouteName(body.route_id)
				}
				that.dateOnly = new Date().toISOString().split('T')[0]
				
				this.$refs.orderPrint.open()
				this.$common.get_request(
					body,
					(res)=>{
						that.resData = res
						// if(that.resData.list.length>0){
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// 	that.resData.list.push({user:{}})
						// }
					}
				);
			},
			/**
			 * 获取缓存宽高的记忆
			*/
			getStorageInput(){
				var that = this
				uni.getStorage({
					key:'lh_height',
					success: (res) => {
						that.Papers.height = res.data
					}
				})
				uni.getStorage({
					key:'lh_width',
					success: (res) => {
						that.Papers.width = res.data
					}
				})
				
			},
			/**
			 * 保存自定义纸张的宽高
			*/
			inputElement(type){
				if(type =='lh_height'){
					var value = this.Papers.height
				}else{
					var value = this.Papers.width
				}
				uni.setStorage({
					key: type,
					data: value,
					success: function () {
					}
				});
			},
			
			//设置打印机打印纸缓存
			gradeChange(e){
				this.Papers.index = e.detail.value
				this.Papers.name =  this.Papers.list[this.Papers.index].text
				this.checkPapers();
				uni.setStorage({
					key: 'Print_Papers_a',
					data: this.Papers,
					success: function () {
					}
				});
			},
			
			//设置打印机缓存
			PrintersChange(e){
				uni.setStorage({
					key: 'lh_PrintersValueKeyName',
					data: e.detail.value,
					success: function () {
					}
				});
				this.Printer.index = e.detail.value
				//获取纸张
				this.CreatePagSizeList(e.detail.value)
				this.checkPapers();
			},
			
			//检查是否选中的是自定义纸张，是的话就显示自定义宽高项
			checkPapers(){
				this.Papers.pagesCreateShow = this.Papers.index==0 ? true : false
			},
			
			//获取纸张、打印机都需要传递进去select的ID
			getStorage(){
				//上次记忆的打印机
				this.CreatePrinterList();//获取打印机
				var index = uni.getStorageSync('lh_PrintersValueKeyName')//获取记忆
				//判断是否有记忆;有的话旧设置记忆的打印机
				if( index==''){
					this.Printer.index = 0 
				}else{
					this.Printer.index = index 
				}

				this.CreatePagSizeList()//获取纸张
				//
				var Papers = uni.getStorageSync('Print_Papers_a')//获取记忆
				
				if(Papers.index){
					this.Papers.index = Papers.index
					this.Papers.name  = Papers.name
				}else{
					this.Papers.index = 0
				}
				
				
				this.checkPapers();
			},
		
		
			/**
			 * 获取打印机列表
			*/
			CreatePrinterList(){
				var iPrinterCount = LODOP.GET_PRINTER_COUNT();
				var option = {}
				for(var i=0;i<iPrinterCount;i++){
					option = {}
					option.value = i;
					option.text = LODOP.GET_PRINTER_NAME(i);
					this.Printer.list.push(option)
				};	
				this.Printer.index = 0
			},
			
			/**
			 * 获取打印机纸张列表
			 * PrintIndex:当前选中的打印机序号
			*/
			CreatePagSizeList(){
				var that = this
				that.Papers.list = []
				that.Papers.list.push({ value: 'CreateCustomPage', text: "自定义纸张" })
				
				var strPageSizeList = LODOP.GET_PAGESIZES_LIST(that.Printer.index,"|");
				var Options = strPageSizeList.split("|"); 
				
				Options.forEach(function(item,i){
					that.Papers.list.push({ value: item, text: item})
				})
				
				//默认
				//that.Papers.name = 0
				//that.Papers.pagesCreateShow = true
			},
		
			/**
			 * 判断当前LODOP是否就绪
			*/
			checkLodop(callFun){
				var that  = this
				var res = undefined;
				var TimerInit = setInterval(function() { //将计时器赋值给 TimerInit 
					res = getLodop();
					if (res.type == false) {
						if(res.clearInterval==true){
							clearInterval(TimerInit) 
							if(that.pageShow == true){
								that.onloadMsg = res.msg
								document.getElementById("onloadMsg").innerHTML = res.msg
							}
							that.pageShow = true
						}
						
					} else {
						clearInterval(TimerInit) 
						LODOP = res.data
						callFun();
					}
				}, 100);
			},
			
			/**
			 * 
			strPageName:所选纸张类型名，字符型。不同打印机所支持的纸张可能不一样，这里的名称同操作系统内打印机属性中的纸张名称，支持操作系统内的自定义纸张。
			关键字“CreateCustomPage”会按以上宽度和高度自动建立一个自定义纸张，所建立的纸张名固定为“LodopCustomPage”，多次建立则刷新该纸张的大小值。
			注：PageWidth、PageHeight 和strPageName都无效时，本函数对纸张大小不起作用，控件则采用所选打印机的默认纸张，但intOrient仍可起作用。
			实际打印时，控件按如下优先级顺序确定纸张大小：
			第1优先是打印维护里纸张属性（“本机自行定义纸张”）设置的纸张大小。
			第2优先是SET_PRINT_PAGESIZE指定的纸张大小； 
			第3优先是上次打印时在预览界面设置里选择的纸张类型；
			第4是按所选打印机的默认纸张； 
			*/
			Prnt_Oneform() {	
				var that = this
				LODOP = getLodop().data; 
				//var LODOP = that.LODOP
				//设置纸张
				var pageSetting = {};
			
				if(that.Papers.list[that.Papers.index].text=="自定义纸张"){
					pageSetting.width    = parseFloat(that.Papers.width)
					pageSetting.height   = parseFloat(that.Papers.height)
					pageSetting.PageName = "CreateCustomPage";
					
				}else{
					pageSetting.width    = 0
					pageSetting.height   = 0
					pageSetting.PageName = that.Papers.name;
					console.log(pageSetting)
				}
				//------------------------------------end
			
				var strStyleCSS  = ""
				var strBodyStyle = "<style>.top10{margin-top:10px;}.Lfte_tr01 td{text-align:left;}table{border-collapse:collapse;margin:0px auto;margin-top:30px;padding:10px;}.solid th,.solid td{border:1px solid black;text-align:center;height:35px;line-height: 2;border-collapse:collapse;}thead tr td,tfoot tr td,.Tip01{border:none;}.b-none{border:none;text-align:left;margin: auto;}.title{width:100%;text-align:center;justify-content:center;justify-content:center;display:flex;flex-direction:column;}</style>"
				var strFormHtml  = "<body>"+strStyleCSS+strBodyStyle+document.getElementById("info").innerHTML+"</body>";


				//动态设置纸张的方法，可以实现无间隔的连续打印输出
				LODOP.PRINT_INIT("");	
				//LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_样式风格");
				//设定打印纸张为固定纸张或自适应内容高，并设定相关大小值或纸张名及打印方向。
				LODOP.SET_PRINT_PAGESIZE(1,pageSetting.width,pageSetting.height,pageSetting.PageName);
				LODOP.SET_PRINT_MODE("CREATE_CUSTOM_PAGE_NAME","摩配纸张");//对新建的纸张重命名
				LODOP.ADD_PRINT_HTML(0,"0.5cm","100%","BottomMargin:2cm",document.getElementById("tfoot").innerHTML);
				//ADD_PRINT_HTM
				//LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");
				if(that.resData.QRcodeBase64!=false){
					LODOP.ADD_PRINT_IMAGE("0.1cm","0.5cm","3cm","3cm",'data:image/jpg;base64,'+that.resData.QRcodeBase64);
				}
				//LODOP.ADD_PRINT_TABLE("0","0","100%","100%",strFormHtml);
				LODOP.ADD_PRINT_TABLE("1cm","0.5cm","RightMargin:0.5cm","BottomMargin:1cm",strFormHtml);
				// LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
				
				//指定打印机
				LODOP.SET_PRINTER_INDEX(that.Printer.index)
				
				LODOP.PRINT();	
				this.$refs.orderPrint.close()
			},
		},
	}
</script>

<style>
	@import "/static/css/print.css";
	.w80b{
		min-width: 80px;
		    justify-content: center;
		    flex-direction: column;
		    display: flex;
		    padding: 0px 5px;
	}
	.pages{
		background-color: #d6d6d6;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	}

	#info{
		/* width: 820px; */
		margin: auto;
		height: 550px;
		overflow: auto;
	}
	
	.main{
		display: flex;
		margin: 10px auto;
		width: 820px;
	}
	.pagesCreate{
		display: flex;
		margin-left: 10px;
	}
	.pagesCreate input{
		height: 25px;
		width: 80px;
	}
	
	.main .ipu{
		background-color: #fff;
		padding: 3px;
		width:200px;
		height:30px
	}
	.main .print{
		background-color: #0f66e0;
		cursor: pointer;
		color: #fff;
		flex-direction: column;
		display: flex;
		justify-content: center;
		margin: 0px auto;
		border-radius: 8px;
	}
	.padding7{
		padding: 7px 10px;
	}
	.padding3{
		padding: 3px 10px;
	}
	.box{
		color: #1b1b1b;
		/* height: 100%; */
		min-width: calc(100% - 40px);
		margin: auto;
		background-color: #ffffff;
		overflow: auto;
		position: relative;
		padding: 0px 20px;
	}
	#tips{
		color: #612323;
		text-align: left;
		justify-content: center;
		display: flex;
		margin: 10px auto;
	}
	.content{
		color: #612323;
		text-align: left;
		justify-content: flex-start;
		display: flex;
		position: relative;
	}
	.solid{
		border: solid 1px #878686;
	}
	#timer{
		color: #612323;
		text-align: left;
		justify-content: flex-start;
		display: flex;
		position: absolute;
		right: 0px;
		top: 50%;
		-webkit-transform: translate(0%,-50%);
	}
	.w14{
		width: 145px;
		    justify-content: end;
		    display: flex;
		    text-align: right;
	}
	.width-auto{
		width: auto;
		flex: 1;
		margin: 0px 5px;
		border: solid 1px #878686;
		padding: 0px 3px
	}
	.contentSav{
		margin-top: 25px;
		border-top: solid 1px #eee;
		padding-top: 5px;
	}

	.tips-left{

		text-align: left;
	}
	.tips-center{
		flex-direction: column;
		display: flex;
		justify-content: center;
		color: #5b5b5b;
	}
	.tips-right{

		text-align: right;
	}
	.butss{
	    color: #fff;
	    padding: 3px 5px;
	    border-radius: 8px;
	    cursor: pointer;
	    margin-right: 10px;
	    display: flex;
	    justify-content: center;
	    flex-direction: row;
	    align-items: baseline;
	}
</style>
